<%@ page contentType="text/html;charset=UTF-8" trimDirectiveWhitespaces="true"%>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<c:set var="extLibs" value="validate,ueditor,fileupload"/>
<sys:header title="文章管理 - ${article.isNewRecord ? '新增' : '编辑'}文章" extLibs="${extLibs}"/>
<div class="portlet box ${boxStyleColor} autoHeight">
	<div class="portlet-title">
		<div class="caption"><i class="fa fa-file-text-o"></i>${article.isNewRecord ? '新增' : '编辑'}文章</div>
	</div>
	<div class="portlet-body form">
		<form:form id="inputForm" modelAttribute="article" action="${ctx}/cms/article/save" method="post" class="form-horizontal">
			<div class="form-body">
				<h4 class="form-section">基本信息</h4>
				<form:hidden path="id"/>
				<form:hidden path="status"/>
				<div class="row">
					<div class="col-xs-6">
						<div class="form-group">
							<label class="control-label col-sm-4"><span class="required">*</span> 所属栏目：</label>
							<div class="col-sm-8">
								<sys:treeselect id="category" name="categoryCode" value="${article.categoryCode}" labelName="categoryName" labelValue="${article.categoryName}"
									title="栏目" url="/cms/category/treeData" module="article"   cssClass="required" showLevel="1" checked="true" notAllowSelectParent="true"/>
							    <span class="help-block">&nbsp;</span>
							</div> 
						</div>
					</div>
					<div class="col-xs-6">
						<div class="form-group">
							<label class="control-label col-sm-4">来源：</label>
							<div class="col-sm-8">
								<div class="radio-list">
									<form:radiobuttons path="source" items="${fns:getDictList('cms_source')}" itemLabel="label" itemValue="value" htmlEscape="false" class="form-control required"/>
								</div>
								<span class="help-block">&nbsp;</span>
							</div>
						</div>
					</div>
				</div>
				<div class="row isSource">
					<div class="col-xs-12">
						<div class="form-group">
							<label class="control-label col-sm-2">转载来源：</label>
							<div class="col-sm-10">
								<form:input path="copyfrom" htmlEscape="false" maxlength="255" class="form-control"/>
								<span class="help-block">&nbsp;</span>
							</div>
						</div>
					</div>
				</div>
				<div class="row">
					<div class="col-xs-6">
						<div class="form-group">
							<label class="control-label col-sm-4">关键字：</label>
							<div class="col-sm-8">
								<form:input path="keywords" htmlEscape="false" maxlength="255" class="form-control" placeholder="用于检索"/>
								<span class="help-block">&nbsp;</span>
							</div>
						</div>
					</div>
					<div class="col-xs-6">
						<div class="form-group">
							<label class="control-label col-sm-4">发布日期：</label>
							<div class="col-sm-8">
								<input id="publishDate" name="publishDate" type="text" readonly="readonly" maxlength="20" class="form-control Wdate required"
								value="<fmt:formatDate value="${article.publishDate}" pattern="yyyy-MM-dd"/>"
								onclick="WdatePicker({dateFmt:'yyyy-MM-dd',isShowClear:false});"/>
							</div>
						</div>
					</div>
				</div>
				<div class="row">
					<div class="col-xs-12">
						<div class="form-group">
							<label class="control-label col-sm-2"><span class="required">*</span> 文章标题：</label>
							<div class="col-sm-10">
								<div class="input-group">
									<form:input path="title" htmlEscape="false" maxlength="255" class="form-control measure-input required"/>
									<span class="input-group-btn">
										<span class="input-group color colorpicker-default" data-color="${not empty article.color ? article.color : '#666'}" data-color-format="hex">
											<span class="input-group-btn">
												<button class="btn default" type="button"><i></i>&nbsp;</button>
											</span>
											<input name="color" type="text" class="form-control" style="width:63px;" value="${article.color}" placeholder="标题颜色">
										</span>
									</span>
								</div>
							</div>
						</div>
					</div>
				</div>
				<h4 class="form-section">详细信息</h4>
				<div class="row">
					<div class="col-xs-12">
						<div class="form-group">
							<label class="control-label col-sm-2">摘要：</label>
							<div class="col-sm-10">
								<form:textarea path="description" htmlEscape="false" rows="4" maxlength="200" class="form-control"/>
								<span class="help-block">&nbsp;</span>
							</div>
						</div>
					</div>
				<div class="row">
					<div class="col-xs-12">
						<div class="form-group">
							<label class="control-label col-sm-2" title="文章图片可在正文中选取（鼠标放在图片上，点击“设为文章图片”即可）。">
								文章图片：<i class="fa icon-question"></i></label>
							<div class="col-sm-10">
								<sys:fileupload id="image" bizCategory="image" bizKey="${article.image}" returnPath="true" uploadType="image" maxUploadNum="1"/>
								<span class="help-block">&nbsp;</span>
							</div>
						</div>
					</div>
				</div>	
				</div>
				<div class="row">
					<div class="col-xs-12">
						<div class="form-group">
							<label class="control-label col-sm-2">正文：</label>
							<div class="col-sm-10">
								<%-- <form:textarea id="content" htmlEscape="true" path="articleData.content" rows="4" maxlength="200" class="form-control"/>
								<sys:ckeditor replace="content" uploadPath="/cms/article" /> --%>
								<sys:ueditor id="content" name="articleData.content" value="${article.articleData.content}" height="300"/>
								<span class="help-block">&nbsp;</span>
							</div>
						</div>
					</div>
				</div>
			<div class="form-actions fluid">
				<div class="row">
					<div class="col-xs-12">
						<div class="col-sm-offset-2 col-sm-10">
							<button id="btnSubmit1" type="submit" class="btn btn-primary" onclick="$('#status').val('0');"><i class="fa fa-check"></i>保存</button>&nbsp;
							<button id="btnCancel" type="button" class="btn default" onclick="closeCurrentTabPage('${param.parentTabPageId}')"><i class="fa fa-reply-all"></i> 关 闭</button>
						</div>
					</div>
				</div>
			</div>
		</form:form>
	</div>
</div>
<sys:footer extLibs="${extLibs}"/>
<link href="${ctxStatic}/assets/global/plugins/bootstrap-colorpicker/css/colorpicker.css" rel="stylesheet" type="text/css"/>
<script src="${ctxStatic}/assets/global/plugins/bootstrap-colorpicker/js/bootstrap-colorpicker.js"></script>
<script type="text/javascript">
	<%--include('ckeditor_js','${ctxStatic}/ckeditor/',['ckeditor.js']);--%>
	$("#inputForm").validate({
		submitHandler: function(form){
			if ($("#categoryCode").val() == ""){
				$("#categoryName").focus();
				showMessage('请选择归属栏目', '警告', 'warning');
				return false;
			<%--}else if (CKEDITOR.instances.content.getData() == "" && $("#href").val().trim() == ""){--%>
			}else if (!contentUE.hasContents() && $("#href").val().trim() == ""){
				contentUE.focus();
 				showMessage('请填写正文！', '警告', 'warning');
				return false;
			}
			<%--$('#content').val(CKEDITOR.instances.content.getData());--%>
			ajaxSubmitForm($(form), function(data){
				showMessage(data.message);
				if(data.result == Global.TRUE){
					closeCurrentTabPage('${param.parentTabPageId}', function(contents, contentWindow){
						contentWindow.page();
					});
				}
			}, "json");
	    }
	});
	$(document).ready(function(){
		if ('${article.isNewRecord}' == 'true'){
			$("#publishDate").val(new Date().format("yyyy-MM-dd"));
		}
	});
	// 设置文章图片按钮事件方法（UEditor）
	function onSetArticleImage(src){
		<%--$("#image").val(src);
		if (src && typeof imagePreview == 'function') {
			$("#image").val(src);
			imagePreview();
			showMessage('设置文章图片成功！');
		}else{
			showMessage('设置文章图片失败！');
		}--%>
		try{
			$("#image").val(src);
			$('#imageUploader').webuploader('refreshFileListByPath');
			showMessage('设置文章图片成功！');
		}catch(ex){
			showMessage('设置文章图片失败！');
		}
	}

	// 来源选中第一个
	if ('${article.isNewRecord}' == 'true'){
		$("input[name=source]:eq(0)").attr("checked",'checked');
	}
	
	// 颜色控件初始化
	$('.colorpicker-default').colorpicker();

	// 根据来源类型显示不同的元素
	var refreshSource = function (val){
		if (val == '2'){
			$('.isSource').show();
		}else{
			$('.isSource').hide();
		}
	}
	refreshSource($('input[name=source]:checked').val());
	$('input[name=source]').click(function(){
		refreshSource($(this).val());
	});
</script>